<script setup>
defineProps(["modelactive"]);
defineEmits(["close-model"]);
</script>
<template>
  <Teleport to="body">
    <Transition name="modal-outer">
      <div
        class="absolute top-0 left-0 w-full bg-black bg-opacity-30 h-screen flex justify-center px-8"
        v-show="modelactive"
      >
        <Transition name="modal-inner">
          <div
            class="p-4 bg-white self-start mt-60 max-w-sm bg-opacity-90"
            v-if="modelactive"
          >
            <slot></slot>
            <button
              class="text-white text-md my-2 bg-weather-primary py-2 px-6 bg-teal-500 tracking-wider hover:bg-teal-600 active:bg-teal-700 transition duration-150"
              @click="$emit('close-model')"
            >
              Close
            </button>
          </div>
        </Transition>
      </div>
    </Transition>
  </Teleport>
</template>
<style scoped>
.modal-outer-enter-active,
.modal-outer-leave-active {
  transition: opacity 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}

.modal-outer-enter-from,
.modal-outer-leave-to {
  opacity: 0;
}

.modal-inner-enter-active {
  transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02) 0.15s;
}
.modal-inner-leave-active {
  transition: all 0.3s cubic-bezier(0.52, 0.02, 0.19, 1.02);
}

.modal-inner-enter-from {
  opacity: 0;
  transform: scale(0.8);
}
.modal-inner-leave-to {
  opacity: 0;
  transform: scale(0.8);
}
</style>
